<template>
  <div>
    <div>
      <span>订单提交成功，请您及时付款！订单号：{{payInfo.out_trade_no}}</span>
    </div>
    <div>
      <h2>应付金额：<font color="red">{{payInfo.total_fee}}</font></h2>
    </div>
    <div>
      <p>微信支付</p>
      <qriously :value="payInfo.code_url" :size="338"/>

    </div>

  </div>


</template>

<script>
  import order from '@/api/order'
  export default {
    name: "pay",
    created(){
      this.createPayInfo()
    },
    methods:{
      //生成支付信息
      createPayInfo(){
        order.createPayInfo(this.$route.params.id)
          .then(response=>{
            this.payInfo = response.data
          })
      },
      //检查订单状态
      queryOrderStatus(orderNo){
        order.queryOrderStatus(orderNo)
          .then(response=>{
            console.log("ggg"+response.data.msg)
            if(response.data.msg=='支付成功'){
              //支付成功，清楚定时器
              clearInterval(this.time1)
              //提示
              this.$message({
                type:'success',
                message:'支付成功！'
              })
              //跳转课程详情页面
              this.$router.push({path:'/courseDetail/'+this.payInfo.course_id})
            }

          })

      }
    },
    data(){
      return{
        payInfo:{},//支付信息
        time1:'' //检查订单状态定时器
      }
    },
    //每三秒检查一次订单状态
    mounted() {
      // setTimeout(()=>{
      //       this.queryOrderStatus(this.payInfo.out_trade_no)
      //     },3000)
      this.time1 = setInterval(()=>{
        this.queryOrderStatus(this.payInfo.out_trade_no)
      },3000)
    },


  }
</script>

<style scoped>

</style>
